<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img src="../../assets/images/user.png" alt="" />
          <div class="user-info">
            <p class="name">Admin</p>
            <p class="role">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2024-5-7</span></p>
          <p>上次登录地点：<span>北京</span></p>
        </div>
      </el-card>
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="(val, key) in tabelLabel"
            :prop="key"
            :label="val"
            :key="key"
          />
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" class="right-num">
      <div class="num">
        <el-card
          v-for="item in countData"
          :key="item.name"
          :body-style="{ display: flex, padding: 0 }"
        >
          <div class="icon-container" :style="{ background: item.color }">
            <component class="icons" :is="item.icon"></component>
          </div>
          <div class="detail">
            <p class="num">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";

//定义表头
const tabelLabel = {
  name: "课程",
  todayBuy: "今日购买",
  monthBuy: "本月购买",
  totalBuy: "总购买",
};

//通过实例代理拿到$api
const { proxy } = getCurrentInstance();
const tableData = ref([]);

//定义函数拿数据
const getTableData = async () => {
  tableData.value = await proxy.$api.getTableData();
};

const countData = ref([]);
const getCountData = async () => {
  countData.value = await proxy.$api.getCountData();
};
//声明生命函数
onMounted(() => {
  getTableData();
  getCountData();
});
</script>
<style lang="less" scoped>
.home {
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 2rem;
    img {
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      margin-right: 4rem;
    }
  }
  .login-info {
    p {
      line-height: 3rem;
      font-size: @font-size-small;
      color: @color-light-grey;
      span {
        color: @color-common-grey;
        margin-left: 6rem;
      }
    }
  }
  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 32%;
      margin-bottom: 2rem;
    }
    .icon-container {
      width: 8rem;
      height: 8rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .icons {
      width: 3rem;
      height: 3rem;
      color: @color-font-normal;
    }
    .detail {
      margin-left: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        font-size: 3rem;
        margin-bottom: 1rem;
      }
      .txt {
        font-size: @font-size-small;
        text-align: center;
        color: @color-light-grey;
      }
    }
  }
  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card {
      width: 48%;
    }
  }
}
</style>
